import React, { useRef, FC } from 'react'
import { withRouter } from 'react-router-dom'
import MyTable from '@/components/common/table'
import commom from '@/api'
import MySelect from '@/components/common/mySelect'
import {Button} from 'antd';
import { useHistory } from 'react-router-dom'
const RoleList: FC = () => {
  const tableRef: RefType = useRef()
  const history = useHistory()
  // 新增按钮
  const AddBtn = () => (
    <Button className="fr" onClick={add} type="primary">
      新增
    </Button>
  )
  
  // 添加
  const add = () => {
    history.push('/dataSource/list/add')
  }
  // 详情
  const detail = () => {
    history.push('/dataSource/list/detail?id=666')
  }

  // 搜索栏配置项
  const searchConfigList = [
    {
      key: 'state',
      slot: (
        <MySelect
          data={[
            { name: '请选择模板类型', key: '' },
            { name: 'MMP', key: '1' },
            { name: 'mysql', key: '2' },
            { name: 'hive', key: '3' }
          ]}
        />
      )
    },
  ]
  const columns = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      render:(text,record,index)=>{
        return index+1
      }
    },
    {
      title: '数据源名称',
      align: 'center',
      dataIndex: 'name',
      render:(text,record,index)=>{
        return 'MPP-测试1'
      }
    }, 
    {
      title: '数据源类型',
      align: 'center',
      dataIndex: 'path',
      render:(text,record,index)=>{
        return 'MPP'
      }
    }, 
    {
      title: '服务器ip',
      align: 'center',
      dataIndex: 'ip',
      render:(text,record,index)=>{
        return '192.168.0.1'
      }
    },
    {
      title: '数据库名',
      align: 'center',
      dataIndex: 'db',
      render:(text,record,index)=>{
        return 'db1'
      }
    },
    {
      title: '创建人',
      align: 'center',
      dataIndex: 'publicName',
      render:(text,record,index)=>{
        return '李四'
      }
    },
    {
      title: '创建人',
      align: 'center',
      dataIndex: 'date',
      render:(text,record,index)=>{
        return '2021年4月14日 15:00:00'
      }
    },
    {
      title: '操作',
      align: 'center',
      dataIndex: 'scan',
      width:'1000',
      render:(text,record,index)=>{
        return <div>
          <Button className="btn" onClick={detail} size="small">
          详情
          </Button>
          <Button  className="btn" size="small">
          删除
          </Button>
        </div>
      }
    }
  ]
  return (
    <>
      <AddBtn />
      <MyTable
        apiFun={commom.getList}
        columns={columns}
        searchConfigList={searchConfigList}
        ref={tableRef}
        extraProps={{ results: 10 }}
      />
    </>
  )
}
export default withRouter(RoleList)
